<template>
  <h3>toRef用法</h3>
  <div>
    <label for="">reactive方式：</label>
    <el-input-number v-model="user.obj.age" />
  </div>
  <div>
    <label for="">toRef方式： </label>
    <el-input-number v-model="age" />
  </div>
</template>

<script lang="ts">
import { defineComponent, toRef, reactive, watchEffect } from "vue";
export default defineComponent({
  name: "CustomToRef",
  setup() {
    const info = {
      sex: "男",
      title: {
        name: "zhang1",
      },
      obj: {
        age: 16,
      },
    };
    const user = reactive({ ...info });
    const name = toRef(user.title, "name");
    const age = toRef(user.obj, "age");
    watchEffect(() => {
      console.log(age, "age");
      console.log("user.obj.age", user.obj.age);
    });
    return { user, name, age };
  },
});
</script>
<style lang="scss" scoped>
label {
  display: inline-block;
  width: 120px;
}
</style>
